/*
 * @Author: dingyuwen ding_yuwen@163.com
 * @Date: 2023-05-10 09:26:10
 * @LastEditTime: 2023-11-10 16:43:00
 * @LastEditors: DingYuwen 43669762+DingYuwen@users.noreply.github.com
 * @Description:
 */

import { Flex, Spinner, Text } from '@chakra-ui/react';
import { QRCodeSVG } from 'qrcode.react';
import CurrentImage, { imagesSelector } from './CurrentImage';
// import { FaDownload } from 'react-icons/fa';
// const token = import.meta.env.VITE_APP_SOCKET_TOKEN;

// import useImageIndexMap from '@/hooks/useImageIndexMap';
import { useAppSelector } from 'store/storeHooks';
function ImageToDisplay() {
  const { progressImage, imageName } = useAppSelector(imagesSelector);

  if (progressImage || imageName) {
    return (
      <Flex pt="4" direction="column" justify="center" align="center" grow="1">
        <Flex
          w="full"
          justify="center"
          align="center"
          grow="1"
          position="relative"
        >
          <CurrentImage />
          {imageName && !progressImage && (
            <Flex
              position="absolute"
              justify="center"
              align="center"
              bottom="16"
              right={{ base: 2, lg: 4, xl: 8, '1080p': 48, '2k': 80, '4k': 96 }}
              flexDir="column"
            >
              <QRCodeSVG
                size={160}
                bgColor="white"
                value={`${origin}/post/meidu.html?name=${imageName}`}
              />
              <Flex
                w={{
                  base: '160px',
                  '1080p': '200px',
                  '2k': '300px',
                  '4k': '400px',
                }}
                flexDir="column"
                color="brand.800"
                p={2}
                textAlign="center"
                align="center"
              >
                {/* <Text fontSize={{ base: 'sm', '2k': 'lg', '4k': 'xl' }}>
                  You can scan the QR code to save this image to your mobile
                  phone.
                </Text> */}
                <Text fontSize={{ base: 'xs', '2k': 'md', '4k': 'lg' }}>
                  您可以扫二维码保存图片到手机
                </Text>
              </Flex>
            </Flex>
          )}
        </Flex>
      </Flex>
    );
  }
  return (
    <Flex grow="1" justify="center" align="center">
      <Spinner
        thickness="4px"
        speed="0.65s"
        emptyColor="brand.50"
        color="brand.600"
        size="xl"
      />
    </Flex>
  );
}

export default ImageToDisplay;
